<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>菜品列表</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">
    <!-- Mobile Devices Support @begin -->
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
    <meta content="no-cache" http-equiv="pragma">
    <meta content="0" http-equiv="expires">
    <meta content="telephone=no, address=no" name="format-detection">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- apple devices fullscreen -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <!-- Mobile Devices Support @end -->
    <link rel="stylesheet" type="text/css" href="FortAwesome/docs/assets/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript">
        var _global = {};
        _global.spm = {};

        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
            WeixinJSBridge.call('hideToolbar');
        });
    </script>
    <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".dci").click(function () {
                $(this).toggleClass("selected");
            });
        });
    </script>
</head>

<body>
<div class="body">
    <div class="topsearch">
        <form class="clearfix">
            <input type="button" onclick="searchFood()" class="sbtn icon-search">
            <input type="text" name="keys" id="keys" class="stxt" onfocus="if (value==defaultValue)value=''"
                   onblur="if(!value)value=defaultValue" value="寻找菜品、店面">
            <a href="order.html" title="我的订单" class="floatr"></a>
        </form>
    </div>
    <!--topsearch-->
    <div class="container">
        <ul class="assort clearfix">
            <li class="ast1 floatl ast-cur"><a href="#">全部<i class="icon-caret-down"></i></a></li>
            <li class="ast2 floatl"><a onclick="showType(0)" href="#">特色菜<i
                    class="icon-caret-down"></i></a></li>
            <li class="ast3 floatl"><a onclick="showType(1)" href="#">店长推荐<i
                    class="icon-caret-down"></i></a></li>
            <li class="ast4 floatl"><a onclick="showType(2)" href="#">精品上市<i
                    class="icon-caret-down"></i></a></li>
        </ul>
        <!--assort-->
        <ul class="foodlist">
            <li>
                <h3 class="tit"><a href="foodcontent.html">惠心上品斑鱼火锅</a></h3>
                <div class="foodintro clearfix"><a href="foodcontent.html" class="foodimg floatl"><img
                        src="images/cpimg.jpg" alt="菜品图片"></a>
                    <div class="foodcon floatl">
                        <p>单价：<b>￥38</b></p>
                        <p class="fts orange">VIP：￥0.1</p>
                        <p>制作时间：<b>10分钟</b></p>
                        <p>可获积分：<b>380分</b></p>
                        <p>特点：<b>鲜嫩可口</b></p>
                        <p><b>回味无穷~</b></p>
                        <p class="btn fts clearfix"><a href="foodcontent.html" class="floatl orange-btn">点菜</a><i
                                class="icon-ok floatl dci"></i></p>
                    </div>
                    <!--foodcon-->
                </div>
                <!--foodintro-->
                <p class="fcomment clearfix"><span class="floatl"><a href="#"><i
                        class="icon-thumbs-up"></i>赞<em>215</em></a></span> <span class="floatl"><a href="#"><i
                        class="icon-comment"></i>评论<em>15</em></a></span> <span class="floatl"
                                                                                style="border-right:0; border-right:none;"><a
                        href="#"><i class="icon-share-alt"></i>转发</a></span></p>
                <em class="lt ltred">特色<br>
                    推荐</em></li>
            <li>
                <h3 class="tit"><a href="foodcontent.html">惠心上品斑鱼火锅</a></h3>
                <div class="foodintro clearfix"><a href="foodcontent.html" class="foodimg floatl"><img
                        src="images/cpimg.jpg" alt="菜品图片"></a>
                    <div class="foodcon floatl">
                        <p>单价：<b>￥38</b></p>
                        <p class="fts orange">VIP：￥0.1</p>
                        <p>制作时间：<b>10分钟</b></p>
                        <p>可获积分：<b>380分</b></p>
                        <p>特点：<b>鲜嫩可口</b></p>
                        <p><b>回味无穷~</b></p>
                        <p class="btn fts clearfix"><a href="foodcontent.html" class="floatl orange-btn">点菜</a><i
                                class="dci icon-ok floatl"></i></p>
                    </div>
                    <!--foodcon-->
                </div>
                <!--foodintro-->
                <p class="fcomment clearfix"><span class="floatl"><a href="#"><i
                        class="icon-thumbs-up"></i>赞<em>215</em></a></span> <span class="floatl"><a href="#"><i
                        class="icon-comment-alt"></i>评论<em>15</em></a></span> <span class="floatl"
                                                                                    style="border-right:0; border-right:none;"><a
                        href="#"><i class="icon-share-alt"></i>转发</a></span></p>
                <em class="lt ltgreen">新品<br>
                    上市</em></li>
        </ul>
        <p class="fenye clearfix"><a href="#" class="floatl clearfix"><i class="icon-caret-left floatl"></i><span
                class="floatl">上一页</span></a><a href="#" class="floatr clearfix"><i class="icon-caret-right floatr"></i><span
                class="floatr">下一页</span></a></p>
    </div>
    <!--container-->
    <!--下导航-->
    <div class="js-navmenu nav-on-bottom style-2">
        <div class="nav-menu has-menu-3"><a href="/index.html" class="icon-home"></a>
            <div class="divide">&nbsp;</div>
            <div class="one"><a class="mainmenu js-mainmenu" href="javascript:void(0);"> <i class="arrow-weixin"></i> 菜品
            </a>
                <div class="submenu js-submenu"><span class="arrow before-arrow"></span> <span
                        class="arrow after-arrow"></span>
                    <ul>
                        <li><a href="#" onclick="showChileType(0)"> 火锅 </a></li>
                        <li><a href="#" onclick="showChileType(1)"> 地方菜 </a></li>
                        <li><a href="#" onclick="showChileType(2)"> 西餐 </a></li>
                        <li><a href="#" onclick="showChileType(3)"> 快餐 </a></li>
                    </ul>
                </div>
            </div>
            <div class="divide">&nbsp;</div>
            <div class="one"><a class="mainmenu js-mainmenu" href="javascript:void(0);"> <i class="arrow-weixin"></i> 订位
            </a>
                <div class="submenu js-submenu"><span class="arrow before-arrow"></span> <span
                        class="arrow after-arrow"></span>
                    <ul>
                        <li><a href="foodlist.html"> 我要订位 </a></li>
                        <li><a href="membercenter.html"> 会员中心 </a></li>
                    </ul>
                </div>
            </div>
            <div class="divide">&nbsp;</div>
            <div class="one"><a class="mainmenu js-mainmenu" href="javascript:void(0);"> <i class="arrow-weixin"></i>
                VIP </a>
                <div class="submenu js-submenu"><span class="arrow before-arrow"></span> <span
                        class="arrow after-arrow"></span>
                    <ul>
                        <li><a href="register.html"> 我要成为VIP </a></li>
                        <li><a href="score.html"> 积分兑换 </a></li>
                    </ul>
                </div>
            </div>
            <div class="divide">&nbsp;</div>
            <div class="one"><a class="mainmenu js-mainmenu" href="javascript:void(0);"> <i class="arrow-weixin"></i> 订单
            </a>
                <div class="submenu js-submenu"><span class="arrow before-arrow"></span> <span
                        class="arrow after-arrow"></span>
                    <ul>
                        <li><a href="ordering.html"> 我的订单 </a></li>
                    </ul>
                </div>
                <!--submenu js-submenu-->
            </div>
            <!--one-->
        </div>
    </div>
    <!--nav-on-bottom下导航结束-->
</div>
<!--body-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->

<script type="text/javascript">

    $(document).ready(function () {
        showFoodList()
    })


    function showTop() {
        $.ajax({
            "url": "/top/count",
            "type": "get",
            "dataType": "json",
            "success": function (json) {
                console.log(json.data)
                var result = json.data;
                if (json.state == 200) {
                    console.log("hello")
                    var result = json.data;
                    var top = `<i class="icon-thumbs-up"></i>赞<em>#{topNum}</em>`
                    top = top.replace(/#{topNum}/g, result)
                    $("#topNum").html(top)
                    console.log(result)
                }


            }
        })

    }


    function showFoodList() {
        $(".foodlist").empty()
        $.ajax({
            "url": "/dishes/list",
            "type": "get",
            "dataType": "json",
            "success": function (json) {
                console.log(json.data)
                var result = json.data;
                if (json.state == 200) {
                    console.log("hello")
                    var result = json.data;
                    console.log(result)
                }

                for (var i in result) {
                    var html =
                        `
      <li>
        <h3 class="tit"><a href="foodcontent.html">#{name}</a></h3>
        <div class="foodintro clearfix"> <a href="foodcontent.html" class="foodimg floatl"><img src="#{images}" alt="菜品图片"></a>
          <div class="foodcon floatl">
            <p>单价：<b>￥#{price}</b></p>
            <p class="fts orange">VIP：￥#{discount}</p>
            <p>制作时间：<b>#{mintue}分钟</b></p>
            <p>可获积分：<b>#{score}分</b></p>
            <p>特点：<b>鲜嫩可口</b></p>
            <p><b>回味无穷~</b></p>
            <p class="btn fts clearfix"><a href="foodcontent.html?id=#{id}"  class="floatl orange-btn">点菜</a><i class="icon-ok floatl dci"></i></p>
          </div>
          <!--foodcon-->
                            </div>
                            <!--foodintro-->
                            <p class="fcomment clearfix"> <span class="floatl"><a href="#" name="flag=0" onclick="ToTop(#{id})" class="ttt" id="topNum"><i id="mytopNum" class="icon-thumbs-up ttt"></i>赞<em>#{topNum}</em></a></span> <span class="floatl"><a href="#"><i class="icon-comment"></i>评论<em>15</em></a></span> <span class="floatl" style="border-right:0; border-right:none;"><a href="#"><i class="icon-share-alt"></i>转发</a></span> </p>
                            #{type} </li>

                            `


                    html = html.replace(/#{name}/g, result[i].name)
                    html = html.replace(/#{id}/g, result[i].id)
                    html = html.replace(/#{price}/g, result[i].price)
                    html = html.replace(/#{discount}/g, result[i].discount)
                    html = html.replace(/#{mintue}/g, result[i].makeTime)
                    html = html.replace(/#{score}/g, result[i].getScore)
                    html = html.replace(/#{topNum}/g, result[i].topNum)
                    html = html.replace(/#{images}/g, result[i].image)
                    if (result[i].type == 0) {
                        html = html.replace(/#{type}/g, '<em class="lt ltred">特色<br>推荐</em>'
                        )
                    } else if (result[i].type == 1) {
                        html = html.replace(/#{type}/g, '<em class="lt ltorange">店长<br>推荐</em>'
                        )

                    } else {
                        html = html.replace(/#{type}/g, '<em class="lt ltgreen">新品<br>上市</em>')

                    }

                    html = html.replace(/#{type}/g, result[i].special)
                    // html=html.replace(/#sum/g,result[i].num*result[i].price)
                    $(".foodlist").append(html)
                }
            }
        })
    }


        function ToTop(id) {
            $.ajax({
                url: "/dishes/top?id=" + id,
                dataType: "json",
                type: "post",
                success: function (json) {
                    if (json.state == 200) {
                        console.log("hello top")
                        showFoodList()
                    }
                }

            })
        }


        function showType(id) {
            $(".foodlist").empty()
            $.ajax({
                "url": "/dishes/type?type=" + id,
                "type": "get",
                "dataType": "json",
                "success": function (json) {
                    console.log(json.data)
                    var result = json.data;
                    if (json.state == 200) {
                        console.log("hello")
                        var result = json.data;
                        console.log(result)
                    }

                    for (var i in result) {
                        var html =
                            `
      <li>
        <h3 class="tit"><a href="foodcontent.html">#{name}</a></h3>
        <div class="foodintro clearfix"> <a href="foodcontent.html" class="foodimg floatl"><img src="#{images}" alt="菜品图片"></a>
          <div class="foodcon floatl">
            <p>单价：<b>￥#{price}</b></p>
            <p class="fts orange">VIP：￥#{discount}</p>
            <p>制作时间：<b>#{mintue}分钟</b></p>
            <p>可获积分：<b>#{score}分</b></p>
            <p>特点：<b>鲜嫩可口</b></p>
            <p><b>回味无穷~</b></p>
            <p class="btn fts clearfix"><a href="foodcontent.html?id=#{id}" class="floatl orange-btn">点菜</a><i class="icon-ok floatl dci"></i></p>
          </div>
          <!--foodcon-->
                            </div>
                            <!--foodintro-->
                            <p class="fcomment clearfix"> <span class="floatl"><a href="#" name="flag=0" onclick="ToTop(#{id})" class="ttt" id="topNum"><i id="mytopNum" class="icon-thumbs-up ttt"></i>赞<em>#{topNum}</em></a></span> <span class="floatl"><a href="#"><i class="icon-comment"></i>评论<em>15</em></a></span> <span class="floatl" style="border-right:0; border-right:none;"><a href="#"><i class="icon-share-alt"></i>转发</a></span> </p>
                            #{type} </li>

                            `


                        html = html.replace(/#{name}/g, result[i].name)
                        html = html.replace(/#{id}/g, result[i].id)
                        html = html.replace(/#{price}/g, result[i].price)
                        html = html.replace(/#{discount}/g, result[i].discount)
                        html = html.replace(/#{mintue}/g, result[i].makeTime)
                        html = html.replace(/#{score}/g, result[i].getScore)
                        html = html.replace(/#{topNum}/g, result[i].topNum)
                        html = html.replace(/#{images}/g, result[i].image)
                        if (result[i].type == 0) {
                            html = html.replace(/#{type}/g, '<em class="lt ltred">特色<br>推荐</em>'
                            )
                        } else if (result[i].type == 1) {
                            html = html.replace(/#{type}/g, '<em class="lt ltorange">店长<br>推荐</em>'
                            )

                        } else {
                            html = html.replace(/#{type}/g, '<em class="lt ltgreen">新品<br>上市</em>')

                        }

                        html = html.replace(/#{type}/g, result[i].special)
                        // html=html.replace(/#sum/g,result[i].num*result[i].price)
                        $(".foodlist").append(html)
                    }
                }
            })

        }


        function showChileType(id) {
            $(".foodlist").empty()
            $.ajax({
                "url": "/dishes/childType?childType=" + id,
                "type": "get",
                "dataType": "json",
                "success": function (json) {
                    console.log(json.data)
                    var result = json.data;
                    if (json.state == 200) {
                        console.log("hello")
                        var result = json.data;
                        console.log(result)
                    }

                    for (var i in result) {
                        var html =
                            `
      <li>
        <h3 class="tit"><a href="foodcontent.html">#{name}</a></h3>
        <div class="foodintro clearfix"> <a href="foodcontent.html" class="foodimg floatl"><img src="#{images}" alt="菜品图片"></a>
          <div class="foodcon floatl">
            <p>单价：<b>￥#{price}</b></p>
            <p class="fts orange">VIP：￥#{discount}</p>
            <p>制作时间：<b>#{mintue}分钟</b></p>
            <p>可获积分：<b>#{score}分</b></p>
            <p>特点：<b>鲜嫩可口</b></p>
            <p><b>回味无穷~</b></p>
            <p class="btn fts clearfix"><a href="foodcontent.html?id=#{id}" class="floatl orange-btn">点菜</a><i class="icon-ok floatl dci"></i></p>
          </div>
          <!--foodcon-->
                            </div>
                            <!--foodintro-->
                            <p class="fcomment clearfix"> <span class="floatl"><a href="#" name="flag=0" onclick="ToTop(#{id})" class="ttt" id="topNum"><i id="mytopNum" class="icon-thumbs-up ttt"></i>赞<em>#{topNum}</em></a></span> <span class="floatl"><a href="#"><i class="icon-comment"></i>评论<em>15</em></a></span> <span class="floatl" style="border-right:0; border-right:none;"><a href="#"><i class="icon-share-alt"></i>转发</a></span> </p>
                            #{type} </li>

                            `


                        html = html.replace(/#{name}/g, result[i].name)
                        html = html.replace(/#{id}/g, result[i].id)
                        html = html.replace(/#{price}/g, result[i].price)
                        html = html.replace(/#{discount}/g, result[i].discount)
                        html = html.replace(/#{mintue}/g, result[i].makeTime)
                        html = html.replace(/#{score}/g, result[i].getScore)
                        html = html.replace(/#{topNum}/g, result[i].topNum)
                        html = html.replace(/#{images}/g, result[i].image)
                        if (result[i].type == 0) {
                            html = html.replace(/#{type}/g, '<em class="lt ltred">特色<br>推荐</em>'
                            )
                        } else if (result[i].type == 1) {
                            html = html.replace(/#{type}/g, '<em class="lt ltorange">店长<br>推荐</em>'
                            )

                        } else {
                            html = html.replace(/#{type}/g, '<em class="lt ltgreen">新品<br>上市</em>')

                        }

                        html = html.replace(/#{type}/g, result[i].special)
                        // html=html.replace(/#sum/g,result[i].num*result[i].price)
                        $(".foodlist").append(html)
                    }
                }

            })
        }



        function searchFood(){
         $.ajax({
             "url":"/dishes/search?name="+$("#keys").val(),
             "type":"get",
             "dataType":"json",
             "success":function (json) {
                 if (json.state==200){
                    result = json.data

                     $(".foodlist").empty()
                     for (var i in result) {
                         var html =
                             `
      <li>
        <h3 class="tit"><a href="foodcontent.html">#{name}</a></h3>
        <div class="foodintro clearfix"> <a href="foodcontent.html" class="foodimg floatl"><img src="#{images}" alt="菜品图片"></a>
          <div class="foodcon floatl">
            <p>单价：<b>￥#{price}</b></p>
            <p class="fts orange">VIP：￥#{discount}</p>
            <p>制作时间：<b>#{mintue}分钟</b></p>
            <p>可获积分：<b>#{score}分</b></p>
            <p>特点：<b>鲜嫩可口</b></p>
            <p><b>回味无穷~</b></p>
            <p class="btn fts clearfix"><a href="foodcontent.html?id=#{id}" class="floatl orange-btn">点菜</a><i class="icon-ok floatl dci"></i></p>
          </div>
          <!--foodcon-->
                            </div>
                            <!--foodintro-->
                            <p class="fcomment clearfix"> <span class="floatl"><a href="#" name="flag=0" onclick="ToTop(#{id})" class="ttt" id="topNum"><i id="mytopNum" class="icon-thumbs-up ttt"></i>赞<em>#{topNum}</em></a></span> <span class="floatl"><a href="#"><i class="icon-comment"></i>评论<em>15</em></a></span> <span class="floatl" style="border-right:0; border-right:none;"><a href="#"><i class="icon-share-alt"></i>转发</a></span> </p>
                            #{type} </li>

                            `


                         html = html.replace(/#{name}/g, result[i].name)
                         html = html.replace(/#{id}/g, result[i].id)
                         html = html.replace(/#{price}/g, result[i].price)
                         html = html.replace(/#{discount}/g, result[i].discount)
                         html = html.replace(/#{mintue}/g, result[i].makeTime)
                         html = html.replace(/#{score}/g, result[i].getScore)
                         html = html.replace(/#{topNum}/g, result[i].topNum)
                         html = html.replace(/#{images}/g, result[i].image)
                         if (result[i].type == 0) {
                             html = html.replace(/#{type}/g, '<em class="lt ltred">特色<br>推荐</em>'
                             )
                         } else if (result[i].type == 1) {
                             html = html.replace(/#{type}/g, '<em class="lt ltorange">店长<br>推荐</em>'
                             )

                         } else {
                             html = html.replace(/#{type}/g, '<em class="lt ltgreen">新品<br>上市</em>')

                         }

                         html = html.replace(/#{type}/g, result[i].special)
                         // html=html.replace(/#sum/g,result[i].num*result[i].price)
                         $(".foodlist").append(html)
                     }
                 }
             }
         })
        }


</script>


<script type="text/javascript" src="js/wap.min.js"></script>
</body>
</html>